<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Chat Demo</title>
        <script src="./assets/js/marked.min.js"></script>
        <style>
            body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; }
            code { background: #eee; padding: 2px 4px; border-radius: 4px; }
            pre code { display: block; background: #f0f0f0; padding: 10px; white-space: pre-wrap; }

            #res > p {
                background-color: #fafafa;
                padding:12px;
                border-radius: 12px;
            } 
        </style>
    </head>
    <body>
        <h1>Chat Demo</h1>
        <select id="selectLLM">
            <option value="chat">普通模型</option>
            <option value="chat_reason">推理型模型</option>
        </select>
        <div>
            <textarea id="content" value="hi" cols="50" rows="5" ></textarea>
        </div>
        <div id="res"></div>
        <div>
            <button onclick="sendRequest()">Send</button>
        </div>
        </div>
    </body>
</html>
<script>
let uri = "api/chat"
function sendRequest(){
    const data = {
        content: document.querySelector("#content").value,
    }; 

    fetch(`http://127.0.0.1:8000/${uri}`,{
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data),
    }).then(response => {
        if (response.ok) {
            const reader = response.body.getReader();
            const decoder = new TextDecoder("utf-8");
            const res = document.querySelector("#res");
            const chatItem = document.createElement("p");
            let final_answer = ""
            res.appendChild(chatItem)

            function read() {
                reader.read().then(({ done, value }) => {
                    if (done) {
                        console.log('Stream closed');
    
                        chatItem.innerHTML = marked.parse(final_answer);
                        res.appendChild(document.createElement("hr"));
                        return;
                    }
    
                    const chunk = decoder.decode(value, { stream: true });
                    // console.log(1000,chunk.split('\r\n'))
                    chunk.split('\r\n').forEach(eventString => {
                        console.log("流式返回相应=========>>>",eventString);
                        chatItem.innerHTML += eventString;  
                        final_answer += eventString
                    });
                    
                    chatItem.innerHTML = marked.parse(chatItem.innerHTML);
                    read();
                }).catch(error => {
                    console.error('Stream error', error);
                })
            }

            read();
        } else {
            console.error('Network response was not ok.');
        }
    }).catch(error => {
        console.error('Fetch error:', error);
    })
}

const selectLLM = document.getElementById('selectLLM');
selectLLM.addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    console.log('Selected option:', selectedOption.value);
    uri = `api/${selectedOption.value}`
});
</script>